<template>
  <div>
    <mt-header title="代理回退">
      <router-link to="/myset" slot="left">
        <i class="mintui mintui-back lic-d"></i>
      </router-link>
    </mt-header>
    <div class="data">
      <input type="text" v-model="year"><span>-</span>
      <input type="text" class="data-d" v-model="month"><span>-</span>
      <input type="text" class="data-d" v-model="day"><span class="moc">至</span>
      <input type="text" v-model="year2"><span>-</span>
      <input type="text" class="data-d" v-model="month2"><span>-</span>
      <input type="text" class="data-d" v-model="day2">
    </div>
    <div class="boc">
      <div class="bn">
        <input type="text" class="ut" placeholder="请输入代理ID">
      </div>
      <button class="bt" @touchend="getselectuserItem"><img src="../../assets/image/sou.png" alt="" >查询</button>
      <div class="tea">
        <div class="myhigth">
        </div>
        <div class="list">
          <div class="left">
            <p class="ck">代理ID：<span>1</span></p>
            <p class="ck">代理名称：<span>3</span></p>
          </div>
          <div class="right">
            <p>获得房卡：<span>4</span></p>
          </div>
          <div class="dingwe">
            <img src="../../assets//image/huan.png" alt="" class="tu">
          </div>
        </div>
        <div class="one">
          <div @touchend='pagingreduce' class="shang">上一页</div>
          <div @touchend='pagingplus' class="xia">下一页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    userselectuserItem
  } from '../../api/api'
  import {
    Toast
  } from 'mint-ui';
  export default {
    data() {
      return {
        year: '',
        month: '',
        day: '',
        year2: '',
        month2: '',
        day2: '',
        pang: '1',
        selesData: [],
        length: ''
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getselectuserItem() {
        let selesdata = {
          statDate: `${this.year}-${this.month}-${this.day}`,
          endDate: `${this.year2}-${this.month2}-${this.day2}`,
          pageNo: this.pang,
          pageSize: 5
        }
        userselectuserItem(selesdata).then(res => {
          if (res.data.code == 0) {
            this.selesData = res.data.data;
            this.length = res.data.totalpage;
          } else {
            Toast("查询没有记录");
          }
        })
      },
      getData() {
        var time = new Date();
        this.year = time.getFullYear();
        this.month = time.getMonth() + 1;
        this.day = time.getDate();
        this.year2 = time.getFullYear();
        this.month2 = time.getMonth() + 1;
        this.day2 = time.getDate();
      },
      pagingplus() {
        if (this.pang < this.length) {
          this.pang++;
          this.getselectuserItem()
        } else {
          Toast('已经是最后一页了');
        }
      },
      pagingreduce() {
        if (this.pang > 1) {
          this.pang--;
          this.getselectuserItem()
        } else {
          Toast('已经是第一页了');
        }
      },
      agentdetails(ids) {
        this.$router.push('/downRecord/' + ids)
      }
    }
  }
</script>

<style lang="less" scoped>
  a {
    text-decoration: none;
  }
  .lic-d {
    font-size: 50px;
  }
  .mint-header {
    background: -webkit-linear-gradient(left, #6180f4, #79cbfa);
    font-size: 36px;
    height: 80px;
  }
  .data {
    height: 80px;
    text-align: center;
    vertical-align: middel;
    padding-top: 20px;
    span {
      font-size: 24px;
      text-align: center;
      font-weight: 700;
    }
    .moc {
      display: inline-block;
      margin: 8px;
      font-size: 30px;
    }
  }
  input {
    width: 12%;
    height: 60px;
    border-radius: 10px;
    background-color: #f3f3f3;
    outline: 0;
    border: 0;
    text-align: center;
    border: 2px solid #cccccc;
  }
  .boc {
    text-align: center;
    .bn {
      //   background-color: red;
      margin-top: 20px;
      .ut {
        width: 50%;
        height: 60px;
        text-align: left;
      }
    }
    .bt {
      background-color: #f3f3f3;
      vertical-align: middle;
      font-size: 36px;
      width: 22%;
      height: 60px;
      margin-top: 30px;
      outline: 0;
      border: 0;
      border-radius: 10px;
      border: 2px solid #ddd;
      cursor: pointer;
    }
    .bt:hover {
      background-color: #050505;
      color: #ffffff;
    }
    img {
      display: inline-block;
      width: 40px;
      margin-right: 10px;
    }
    .tea {
      height: 900px;
      margin: 0 10px;
      background-color: #afafaf;
      margin-top: 20px;
      .cki {
        font-size: 50px;
        padding-top: 150px;
        font-weight: 700;
      }
      .myhigth {
        height: 10px;
      }
    }
    .list {
      height: 108px;
      border: 2px solid #cccccc;
      margin: 10px 10px 0;
      color: #949494;
      border-radius: 10px;
      background-color: #fff;
      position: relative;
      border: 2px solid #cccccc;
      p {
        margin: 0;
        padding: 0;
        font-size: 28px;
      }
      .left {
        float: left;
        padding-left: 10px;
        margin-top: 10px;
        font-size: 24px;
        .ck {
          text-align: left;
        }
        p {
          margin-bottom: 10px;
        }
      }
      .right {
        float: right;
        padding-right: 100px;
        margin-top: 10px;
      }
      .dingwe {
        width: 80px;
        height: 80px;
        position: absolute;
        right: 4px;
        top: 15px;
        .tu {
          width: 80px;
        }
      }
    }
  }
  .one {
    height: 60px;
    margin: 10px 10px 0;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
    margin-top: 10px;
    margin-bottom: 0;
  }
  .shang {
    width: 320px;
    float: left;
    border: 2px solid #cccccc;
    border-radius: 25px;
    background-color: #dee0e0;
    font-size: 28px;
  }
  .shang:hover {
    background-color: #050505;
    color: #ffffff;
  }
  .xia {
    width: 320px;
    float: right;
    border-radius: 25px;
    border: 2px solid #cccccc;
    background-color: #dee0e0;
    font-size: 28px;
  }
  .xia:hover {
    background-color: #050505;
    color: #ffffff;
  }
  input::-webkit-input-placeholder {
    font-size: 36px;
    color: #ccc;
    line-height: 28px;
  }
  .ut::-webkit-input-placeholder {
    font-size: 28px;
    color: #919191;
  }
</style>
